<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学校名称:</span>
        <select class="select" @change="scS" v-model="typeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in typeOption" :label="item" :value="key"></option>
        </select>
      </div>
    </div>

    <div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
      <span class="title">OA功能模块</span>
      <div class="kong"></div>
      <div class="form2">
        <ul v-if="powerlist.length !== 0">
          <li v-for="(item, index) in powerlist">
            <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllChange(item, index, $event)">{{item.title}}</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="item.checkedCities" @change="handleCheckedCitiesChange(item, index, $event)">
                <el-checkbox v-for="(city, id) in item.cities" :label="city" :key="id" :value="city.id">{{city}}</el-checkbox>
              </el-checkbox-group>
          </li>
        </ul>
      </div>
      <div class="bottom" v-if="powerlist.length !== 0">
        <div class="right">
          <button class="btn btn-danger" @click="subLL">确定</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// const cityOptions = ['上海', '北京', '广州', '深圳']
export default {
  data () {
    return {
      typeSelect: null,
      typeOption: [],
      powerlist: [],
      player: '凹凸鳗',
      upShow: false,
      Enline: null,
      teaName: null,
      line: null,
      lineOption: [],
      tableData: []
    }
  },
  methods: {
    subLL () {
      let idList = []
      for (var i = 0; i < this.powerlist.length; i++) {
        for (var a = 0; a < this.powerlist[i].checkedId.length; a++) {
          idList.push({resourceId: this.powerlist[i].checkedId[a]})
        }
      }
      // console.log(idList)
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'sys/source/pc/initCreate', {
        schoolId: this.typeSelect,
        schoolList: idList
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
      this.$router.push('/sys/school/manage')
    },
    upshow () {
      this.upShow = !this.upShow
    },
    append () {
      // store.append({ code: code++, label: 'testtest', children: [] }, data)
      this.upShow = true
    },
    scS () {
      if (this.typeSelect != null) {
        this.$http.post(this._httpUrl + 'sys/source/pc/query', {
          'schoolId': this.typeSelect
        }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            this.powerlist = response.data.data.sysList
            let checkList = response.data.data.schoolList
            // console.log(JSON.stringify(response.data.data.schoolList))
            for (var i = 0; i < this.powerlist.length; i++) {
              this.powerlist[i].title = this.powerlist[i].resourceName
              // this.powerlist[i].checkAll = false
              // this.powerlist[i].isIndeterminate = false
              let adsf = []
              let qwer = []
              for (var a = 0; a < this.powerlist[i].subList.length; a++) {
                adsf.push({
                  name: this.powerlist[i].subList[a].resourceName,
                  id: this.powerlist[i].subList[a].id
                })
                qwer.push(this.powerlist[i].subList[a].resourceName)
                // for (var b = 0; b < adsf.length; b++) {
                //   qwer[b] = adsf[b]
                // }
                this.powerlist[i].Acities = adsf
                this.powerlist[i].cities = qwer
              }
            }
            let schoolList = []
            for (var g = 0; g < this.powerlist.length; g++) {
              schoolList.push({
                title: this.powerlist[g].resourceName,
                Acities: this.powerlist[g].Acities,
                cities: this.powerlist[g].cities,
                resourceId: this.powerlist[g].id,
                resourceName: this.powerlist[g].resourceName,
                subList: this.powerlist[g].subList,
                checkedCities: [],
                checkedId: [],
                checkAll: false,
                isIndeterminate: false
              })
            }
            // console.log(schoolList)
            if (response.data.data.schoolList != null) {
              for (var ir = 0; ir < schoolList.length; ir++) {
                for (var ar = 0; ar < checkList.length; ar++) {
                  if (schoolList[ir].resourceId === checkList[ar].resourceId) {
                    checkList[ar].title = schoolList[ir].title
                    checkList[ar].Acities = schoolList[ir].Acities
                    checkList[ar].cities = schoolList[ir].cities
                    checkList[ar].checkedCities = []
                    checkList[ar].checkedId = []
                    checkList[ar].checkedId.push(checkList[ar].resourceId)
                    if (checkList[ar].subList.length === schoolList[ir].subList.length) {
                      checkList[ar].checkAll = true
                      checkList[ar].isIndeterminate = false
                    } else if (checkList[ar].subList.length === null) {
                      checkList[ar].checkAll = false
                      checkList[ar].isIndeterminate = false
                    } else {
                      checkList[ar].checkAll = false
                      checkList[ar].isIndeterminate = true
                    }
                    for (var h = 0; h < checkList[ar].subList.length; h++) {
                      checkList[ar].checkedId.push(checkList[ar].subList[h].resourceId)
                      checkList[ar].checkedCities.push(checkList[ar].subList[h].resourceName)
                    }
                    schoolList[ir] = checkList[ar]
                  }
                }
              }
              // console.log(checkList)
              // console.log(schoolList)
              this.powerlist = schoolList
            } else {
              // console.log(this.powerlist)
              for (var l = 0; l < this.powerlist.length; l++) {
                this.powerlist[l].checkedCities = this.powerlist[l].cities
                this.powerlist[l].checkedId = []
                this.powerlist[l].checkedId.push(this.powerlist[l].id)
                for (var k = 0; k < this.powerlist[l].Acities.length; k++) {
                  // console.log(this.powerlist[l].Acities[k].id)
                  this.powerlist[l].checkedId.push(this.powerlist[l].Acities[k].id)
                }
                this.powerlist[l].checkAll = true
                this.powerlist[l].isIndeterminate = false
              }
            }
            // console.log(this.powerlist)
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
      }
    },
    handleCheckAllChange (item, index, e) {
      item.isIndeterminate = false
      if (item.checkAll === true && item.isIndeterminate === false) {
        item.checkedCities = item.cities
        item.checkedId.push(item.id)
        for (var i = 0; i < item.subList.length; i++) {
          item.checkedId.push(item.subList[i].id)
        }
      } else {
        item.checkedCities = []
        item.checkedId = []
      }
      this.$set(this.powerlist, index, item)
    },
    handleCheckedCitiesChange (item, index, e) {
      let checkedCount = item.checkedCities.length
      item.checkAll = checkedCount === item.cities.length
      item.isIndeterminate = checkedCount > 0 && checkedCount < item.cities.length
      if (item.checkedId.indexOf(item.id) < 0) {
        item.checkedId.push(item.id)
      }
      for (var i = 0; i < item.Acities.length; i++) {
        if (item.checkedCities.indexOf(item.Acities[i].name) >= 0 && item.checkedId.indexOf(item.Acities[i].id) < 0) {
          item.checkedId.push(item.Acities[i].id)
        }
      }
      this.$set(this.powerlist, index, item)
      // console.log(item)
    }
  },
  mounted () {
    this.xtoken = {'yxt-xtoken': localStorage.xtoken}
    this.$http.post('http://119.23.36.128:8020/yxt-web/sys/school/manage/schoolList', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        let asdf = {}
        for (var i = 0; i < response.data.data.length; i++) {
          asdf[response.data.data[i].id] = response.data.data[i].schoolName
        }
        this.typeOption = asdf
      } else {
        this.$route.push('/login')
      }
    })
    // this.$http.post('http://119.23.36.128:8020/yxt-web/workApproval/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
    //   if (response.body.code === '000') {
    //     // console.log(response.data.data)
    //     this.lineOption = response.data.data
    //   } else {
    //     this.$route.push('/login')
    //   }
    // })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        margin-right: 2%;
        width: 18%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      input{
        margin-left: 4%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
  }
</style>

<style scoped>
  div[data-v-22bf8d34] ul
  {
    position: relative;
    left: 12%;
  }
  div[data-v-22bf8d34]
  {
    padding-bottom: 10px;
  }
  .el-upload--picture-card
  {
    margin-left: 9%; 
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    position: relative; top: -28px;
  }
  .tree{
    position: relative; left: 60%;
    width: 40%;
  }
  .span{
    opacity: 0;
  }
  .form2{
    margin-top: -20px;
    margin-left: 8.3%;
    margin-right: 10px;
    overflow: hidden;
  }
  .form2 ul li{
    width: 96% !important;
    margin-right: 4% !important;
    margin-bottom: 3% !important;
  }
  .form2 .firstLine{
    padding: 30px 0 10px 0;
  }
  .form2 .secondLine{
    padding: 30px 0 50px 0;
  }
  .form2 .form-longText{
    width: 50%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .form2 .form-text{
    width: 70%;
    border: 0;
    border-bottom: 1px solid #D7D7D7;
  }
  .form2 ul{
    width: 100%;
    margin-top: 30px;
    margin-left: -100px;
    overflow: hidden;
  }
  .form2 ul li .el-checkbox{
    position: relative; left: 14%;
  }
  .form2 ul li .el-checkbox-group{
    width: 100%;
  }
  .form2 ul li .el-checkbox-group .el-checkbox{
    margin-left: 4%;
    margin-right: 1%;
    margin-top: 8px;
  }
  .bottom .right{
    text-align: center;
    padding: 0 60px 0 0;
  }
  .el-checkbox-group{
    width: 100px;
  }
  .el-checkbox-group .el-checkbox{
    clear: both;
  }
  label[data-v-d525f0a6]{
    clear: both;
  }
</style>
